<!--vue模板-->
<template>
  <div>
    附件

    <el-upload
      class="upload-demo"
      action="http://localhost:8080/upload/file"
      name="file"
      :show-file-list="false"
      :multiple="true"
      :limit="6"
      :on-success="handlersuccess"
    >
      <el-button type="primary">批量上传</el-button>
    </el-upload>
  </div>

  <!--表格数据 -->
  <el-table :data="tableData" style="width: 100%" stripe border>
    <el-table-column prop="name" label="文件名称" header-align="center" />
    <el-table-column
      prop="size"
      label="文件大小"
      header-align="center"
      width="180"
    />
    <el-table-column
      prop="uploaduser"
      label="上传人"
      header-align="center"
      width="120"
    />
    <el-table-column
      prop="uploadDate"
      label="上传时间"
      header-align="center"
      width="180"
    />

    <el-table-column
      label="操作"
      width="180"
      header-align="center"
      align="center"
    >
      <template v-slot="{ row }">
        <el-button type="danger" @click="del(row.url)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<!--vue 组件选项定义-->
<script>
export default {
  data() {
    return {
      tableData: [],
      user: {},
    };
  },

  emits: ["refreshData"],

  props: {
    attData: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },

  //侦听附件
  watch: {
    tableData: {
      handler: function (val) {
        if (this.attData.length == 0) this.$emit("refreshData", val);
      },
      deep: true,
    },
    attData: {
      handler: function (val) {
        this.tableData = val;
      },
    },
  },
  created() {
    this.user = this.$session.getUser();
  },
  methods: {
    del(url) {
      let i = 0;
      for (let j = 0; j < this.tableData.length; j++) {
        let tmp = this.tableData[j];
        if (tmp.url == url) {
          i = j;
          break;
        }
      }
      //删除
      this.tableData.splice(i, 1);
    },
    handlersuccess(response) {
      if (response.code == 200) {
        let tmp = response.result;
        tmp.uploaduser = this.user.account;
        this.tableData.push(tmp);
      }
    },
  },
};
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped>
:deep(.upload-demo) {
  display: inline-block;
}
</style>
